<template>
    <div class="page">
        <div id="container" />
    </div>
</template>

<script lang="ts">
export default { name: '' }
</script>

<script lang="ts" setup>
import { reactive, watch, ref, nextTick, onMounted, useAttrs, useSlots, h, render } from 'vue'
import statusImg from './images/tolerable.png'

// const slots = useSlots()
// const attrs = useAttrs()
// const emits = defineEmits()

const nodeData = {
    created_time: '2025-04-08 17:00:14',
    updated_time: '2025-04-08 17:00:14',
    created_by: 5343072436764672,
    updated_by: 5343072436764672,
    id: 19,
    node_name: '10-C02立项批复',
    node_time: 20, // 节点的时间
    pre_node: '14,18', // 前置节点的id，用逗号分隔
    pre_relationship: 'AND', // 前置节点的关系，可选值为：AND、OR
    remarks: '',
    entityId: 19,
    defaultPosition: 'C3', // 节点的位置
    position: '350, 50', // 节点的位置x,y
    anchorGroups: [
        {
            count: 3, // 锚点数量
            position: 'top' // 锚点组在节点的位置，可选值为：top、bottom
        },
        {
            count: 2,
            position: 'bottom'
        }
    ], // 节点的支柱组，数组
    anchorConnects: [
        {
            source: '14', // 前置节点的id转字符串
            start: 'port1_groupBottom', // 前置节点的锚点位置或流出方向
            end: 'port1_groupTop' // 当前节点的锚点位置或流入方向
        }
    ], // 锚点连接关系数组，前置节点与当前节点的流转线存在锚点



    planStart: '2025/4/2', // 计划开始
    planEnd: '2025/4/2', // 计划结束
    planCycle: 3, // 计划周期
    actuallyStart: '2025/4/2', // 实际开始
    actuallyEnd: '2025/4/2', // 实际结束
    actuallyCycle: 3, // 实际周期
    status: 'READY', //状态：READY=可开展（绿色底色）、DISABLED不可开展（灰白底色）、RUN=进行中、TOLERABLE=容缺完成、FINISH=完全完成
    delay: 3 // 延期：0正常，正数表示延期，复数表示提前
}

// READY=可开展（绿色底色）、DISABLED不可开展（灰白底色）、RUN=进行中、TOLERABLE=容缺完成、FINISH=完全完成
const getBackgroundColor = (status: 'READY' | 'DISABLED' | 'RUN' | 'TOLERABLE' | 'FINISH') => {
    switch (status) {
    case 'READY':
        return '#37C461'
    case 'DISABLED':
        return '#EAEAEA'
    case 'RUN':
        return '#FF6262'
    case 'TOLERABLE':
    case 'FINISH':
        return '#3B85E8'
    }
}

const state = reactive({

})

const rendera = () => {
    render(getNodes(nodeData), document.getElementById('container'))
}

const getNodes = (data) => {
    return h('div', {
        class: 'node-container',
        style: {
            backgroundColor: getBackgroundColor(data.status)
        }
    }, [
        h('div', {
            class: 'title-container'
        }, [
            h('span', {
                class: 'title'
            }, data.node_name),
            h('div', {
                class: 'status-container'
            }, [
                h('img', {
                    src: statusImg
                }),
                h('img', {
                    src: statusImg
                }),
                h('img', {
                    src: statusImg
                })
            ])
        ]),
        h('div', {
            class: 'main-container'
        }, [
            h('div', {
                class: 'main-left'
            }, [
                h('div', {
                    class: 'item'
                }, [
                    h('span', {
                        class: 'label'
                    }, '计划开始：'),
                    h('span', {
                        class: 'value'
                    }, data.planStart)
                ]),
                h('div', {
                    class: 'item'
                }, [
                    h('span', {
                        class: 'label'
                    }, '计划结束：'),
                    h('span', {
                        class: 'value'
                    }, data.planEnd)
                ]),
                h('div', {
                    class: 'item'
                }, [
                    h('span', {
                        class: 'label'
                    }, '计划周期：'),
                    h('span', {
                        class: 'value block'
                    }, data.planCycle + '天')
                ])
            ]),
            h('div', {
                class: 'middle-line'
            }),
            h('div', {
                class: 'main-right'
            }, [
                h('div', {
                    class: 'item'
                }, [
                    h('span', {
                        class: 'label'
                    }, '实际开始：'),
                    h('span', {
                        class: 'value'
                    }, data.actuallyStart)
                ]),
                h('div', {
                    class: 'item'
                }, [
                    h('span', {
                        class: 'label'
                    }, '实际结束：'),
                    h('span', {
                        class: 'value'
                    }, data.actuallyEnd)
                ]),
                h('div', {
                    class: 'item'
                }, [
                    h('span', {
                        class: 'label'
                    }, '实际周期：'),
                    h('span', {
                        class: 'value block'
                    }, data.actuallyCycle + '天')
                ])
            ])
        ])
    ])
}

onMounted(() => {
    watch(() => state, () => {
        rendera()
    }, { deep: true, immediate: true })
})



// defineExpose({

// })
</script>
<style lang="scss">
.node-container {
    width: 288px;
    height: 148px;
    border-radius: 8px;
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%);

    .title-container {
        display: flex;
        justify-content: space-between;
        padding-right: 4px;
        padding-left: 14px;

        .title {
            flex: 1;
            margin-top: 17px;
            overflow: hidden;
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .status-container {
            margin-top: 4px;

            img {
                display: inline-block;
                width: 44px;
                margin-left: 6px;
            }
        }
    }

    .main-container {
        display: flex;
        margin-top: 9px;
        color: #fff;
        font-size: 12px;

        .main-left {
            flex: 1;
        }

        .middle-line {
            width: 1px;
            height: 73px;
            background-color: rgb(255 255 255 / 25%);
        }

        .main-right {
            flex: 1;
        }

        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 11px;

            .label {
                margin-left: 14px;
            }

            .value {
                margin-right: 15px;
                text-align: right;

                &.block {
                    height: 22px;
                    padding: 2px 10px;
                    border-radius: 4px;
                    background: #fff;
                    color: #616161;
                    font-weight: 600;
                }
            }
        }
    }
}
</style>